<template>
   <teleport to="#message">
    <div class="alert message-info fixed-top w-50 mx-auto d-flex justify-content-between mt-2"
      :class="classObject" v-if="isVisible">
      <span>{{message}}</span>
      <button type="button" class="btn-close"  @click.prevent="hide"></button>
    </div>
  </teleport>
</template>

<script lang='ts'>

import { defineComponent, PropType, ref } from 'vue'
export type MessageType='success' | 'error' | 'default'
export default defineComponent({
  name: 'Message',
  props: {
    message: String, // 这个主要是来显示你的错误的信息，通过调用组件向其中传递错误的信息
    types: {
      type: String as PropType<MessageType>,
      default: 'default '
    }

  },
  emits: ['close-message'], // 关闭这个message
  setup (props, context) {
    const node = document.createElement('dev')
    node.id = 'message'
    document.body.appendChild(node)
    const isVisible = ref(true)
    const classObject = {
      'alert-success': props.types === 'success',
      'alert-danger': props.types === 'error',
      'alert-primary': props.types === 'default'
    }// 动态的添加类名，一旦props里的types，是成功或是失败，那就去动态的去添加相应的类名。
    const hide = () => {
      isVisible.value = false
      context.emit('close-message', true)
    }
    return {
      hide,
      classObject,
      isVisible
    }
  }
})

</script>

<style>

</style>
